<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --bg-primary: #f5f7fb;
            --bg-secondary: #ffffff;
            --text-primary: #333333;
            --text-secondary: #6b7280;
            --border-color: #f0f0f5;
            --message-user-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
            --message-ai-bg: #ffffff;
            --message-ai-color: #333333;
            --shadow-color: rgba(0,0,0,0.05);
            --shadow-light: rgba(107, 114, 251, 0.3);
            --input-bg: #f5f7fb;
            --highlight: #6366f1;
            /* 添加主题过渡默认值 */
            --theme-transition-duration: 0.8s;
            --theme-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        body.dark-mode {
            --bg-primary: #121212;
            --bg-secondary: #1e1e1e;
            --text-primary: #e0e0e0;
            --text-secondary: #a0a0a0;
            --border-color: #2a2a2a;
            --message-user-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
            --message-ai-bg: #2a2a2a;
            --message-ai-color: #e0e0e0;
            --shadow-color: rgba(0,0,0,0.2);
            --shadow-light: rgba(107, 114, 251, 0.2);
            --input-bg: #2a2a2a;
            --highlight: #8b5cf6;
        }
        
        * {
            transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), 
                        color var(--theme-transition-duration) var(--theme-transition-timing), 
                        border-color var(--theme-transition-duration) var(--theme-transition-timing), 
                        box-shadow var(--theme-transition-duration) var(--theme-transition-timing);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        .chat-container {
            display: flex;
            height: calc(100vh - 70px);
        }
        .sidebar {
            width: 0;
            transition: width 0.3s ease, background-color 0.4s ease;
            background-color: var(--bg-secondary);
            overflow-y: auto;
            border-right: 1px solid var(--border-color);
            box-shadow: 2px 0 10px var(--shadow-color);
            z-index: 10;
        }
        .sidebar.active {
            width: 280px;
        }
        .sidebar-header {
            padding: 20px 16px;
            border-bottom: 1px solid var(--border-color);
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
        }
        .sidebar-actions {
            display: flex;
            margin-top: 15px;
        }
        .sidebar-btn {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            background-color: rgba(255,255,255,0.2);
            border-radius: 6px;
            color: white;
            font-size: 14px;
            margin-right: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .sidebar-btn:hover {
            background-color: rgba(255,255,255,0.3);
        }
        .sidebar-btn i {
            margin-right: 6px;
        }
        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background-color: var(--bg-primary);
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        .chat-input {
            border-top: 1px solid var(--border-color);
            padding: 16px;
            background-color: var(--bg-secondary);
            box-shadow: 0 -2px 10px var(--shadow-color);
        }
        .message {
            max-width: 80%;
            margin-bottom: 16px;
            border-radius: 18px;
            padding: 12px 16px;
            line-height: 1.5;
            position: relative;
            animation: messageIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                        box-shadow 0.3s ease;
            will-change: transform, box-shadow;
        }
        @keyframes messageIn {
            0% { opacity: 0; transform: scale(0.8) translateY(10px); }
            60% { transform: scale(1.03) translateY(-2px); }
            80% { transform: scale(0.97) translateY(1px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        .user-message {
            background: var(--message-user-bg);
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
            box-shadow: 0 2px 5px var(--shadow-light);
        }
        .ai-message {
            background-color: var(--message-ai-bg);
            color: var(--message-ai-color);
            margin-right: auto;
            border-bottom-left-radius: 4px;
            box-shadow: 0 2px 5px var(--shadow-color);
        }
        .message p {
            margin: 0;
        }
        .bottom-bar {
            height: 70px;
            background-color: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px var(--shadow-color);
            transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
                        border-color var(--theme-transition-duration) var(--theme-transition-timing),
                        box-shadow var(--theme-transition-duration) var(--theme-transition-timing);
            position: relative;
            z-index: 10;
        }
        
        .dark-mode .bottom-bar {
            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.2);
        }
        
        .model-selector {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            opacity: 0.5;
            transition: all 0.3s ease;
            background-color: var(--bg-secondary);
            border-radius: 10px;
            padding: 4px 8px;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 5px var(--shadow-color);
            transform: translateY(0);
            overflow: hidden;
            max-height: 40px;
        }
        .model-selector:hover {
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px var(--shadow-color);
        }
        .model-selector-label {
            display: flex;
            align-items: center;
            margin-right: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
        }
        .model-selector-label i {
            margin-right: 6px;
            color: var(--highlight);
        }
        .model-dropdown {
            flex: 1;
            position: relative;
        }
        .model-dropdown select {
            appearance: none;
            width: 100%;
            padding: 6px 24px 6px 12px;
            font-size: 13px;
            border: none;
            background-color: transparent;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s;
        }
        .model-dropdown select:focus {
            outline: none;
        }
        .model-dropdown select option {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            padding: 10px;
        }
        .model-dropdown::after {
            content: '\f107';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--highlight);
            transition: transform 0.3s ease;
        }
        .model-dropdown:hover::after {
            transform: translateY(-50%) rotate(180deg);
        }
        .tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 16px;
            color: var(--text-secondary);
            transition: all 0.3s var(--theme-transition-timing);
            position: relative;
            border-radius: 12px;
            cursor: pointer;
            margin: 0 4px;
            overflow: hidden;
        }
        
        .tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background-color: var(--highlight);
            transform: translateX(-50%);
            transition: width 0.3s var(--theme-transition-timing);
            opacity: 0;
            border-radius: 3px 3px 0 0;
        }
        
        .tab.active {
            color: var(--highlight);
        }
        
        .tab.active::before {
            width: 60%;
            opacity: 1;
        }
        
        .tab:hover {
            color: var(--highlight);
            transform: translateY(-3px);
            background-color: rgba(99, 102, 241, 0.05);
        }
        
        .tab:hover::before {
            width: 40%;
            opacity: 0.7;
        }
        
        .tab i {
            font-size: 1.25rem;
            margin-bottom: 4px;
            transition: transform 0.3s ease;
        }
        
        .tab:hover i {
            transform: scale(1.15);
        }
        
        .tab span {
            font-size: 0.75rem;
            transition: all 0.3s ease;
        }
        
        .dark-mode .tab {
            color: var(--text-secondary);
        }
        
        .dark-mode .tab.active {
            color: var(--highlight);
        }
        
        .dark-mode .tab:hover {
            background-color: rgba(139, 92, 246, 0.1);
        }
        .history-item {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .history-item:hover {
            background-color: rgba(99, 102, 241, 0.05);
        }
        .history-item.active {
            background-color: rgba(99, 102, 241, 0.1);
            border-left: 3px solid var(--highlight);
        }
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: var(--bg-secondary);
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px var(--shadow-color);
            z-index: 1;
            border-radius: 10px;
            overflow: hidden;
        }
        .dropdown-item {
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            color: var(--text-primary);
            transition: all 0.2s;
        }
        .dropdown-item:hover {
            background-color: rgba(99, 102, 241, 0.05);
        }
        .show {
            display: block;
        }
        .chat-input-container {
            position: relative;
            display: flex;
            align-items: center;
        }
        #message-input {
            padding-right: 50px;
            padding-left: 40px;
            background-color: var(--input-bg);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-color: var(--border-color);
            color: var(--text-primary);
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        #message-input:focus {
            background-color: var(--bg-secondary);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.15);
            border-color: var(--highlight);
            transform: translateY(-2px);
        }
        #message-input:focus + .model-selector {
            opacity: 1;
            transform: translateY(-2px);
        }
        #message-input::placeholder {
            color: var(--text-secondary);
        }
        #send-btn {
            position: absolute;
            right: 8px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #send-btn:hover {
            transform: scale(1.1) rotate(15deg);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
        }
        #send-btn:active {
            transform: scale(0.9);
            transition: transform 0.1s;
        }
        .nav-title {
            font-weight: 600;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }
        .message-time {
            font-size: 11px;
            opacity: 0.7;
            margin-top: 4px;
            text-align: right;
        }
        .typing-indicator {
            display: flex;
            padding: 15px;
            background-color: var(--message-ai-bg);
            border-radius: 20px;
            width: fit-content;
            margin-bottom: 16px;
            align-self: flex-start;
            margin-left: 46px;
            box-shadow: 0 2px 5px var(--shadow-color);
            animation: typingBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes typingBounce {
            0% { transform: scale(0.5); }
            60% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .typing-indicator span {
            height: 8px;
            width: 8px;
            background-color: var(--highlight);
            border-radius: 50%;
            display: inline-block;
            margin: 0 2px;
            animation: typing 1s infinite;
            opacity: 0.7;
        }
        .typing-indicator span:nth-child(1) {
            animation-delay: 0s;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        @keyframes typing {
            0%, 100% { transform: translateY(0px); }
            40% { transform: translateY(-6px); }
            80% { transform: translateY(1px); }
        }
        .no-chats {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-secondary);
            padding: 20px;
            text-align: center;
        }
        .no-chats i {
            font-size: 48px;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        .settings-btn {
            color: var(--text-secondary);
            transition: all 0.2s;
            cursor: pointer;
        }
        .settings-btn:hover {
            color: var(--highlight);
        }
        .theme-toggle {
            padding: 0 12px;
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .theme-toggle:hover {
            background-color: rgba(99, 102, 241, 0.1);
            transform: translateY(-2px);
        }
        
        .theme-toggle:active {
            transform: translateY(0px) scale(0.95);
        }
        
        .theme-toggle i {
            position: absolute;
            font-size: 18px;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            transform: scale(0.8);
        }
        
        .theme-toggle .fa-moon {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        
        .dark-mode .theme-toggle .fa-moon {
            opacity: 0;
            transform: scale(0.5) rotate(-45deg);
        }
        
        .dark-mode .theme-toggle .fa-sun {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        
        .theme-toggle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: -1;
            transition: transform 0.6s var(--theme-transition-timing);
            transform: scale(0);
        }
        
        .dark-mode .theme-toggle::before {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 70%);
            transform: scale(1);
        }
        
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-primary);
            pointer-events: none;
            z-index: -1;
            opacity: 0;
            transition: opacity var(--theme-transition-duration) var(--theme-transition-timing);
        }
        
        body.theme-transitioning {
            overflow: hidden;
        }
        
        body.theme-transitioning::after {
            opacity: 1;
        }
        
        .theme-transition-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transform: scale(0);
            border-radius: 50%;
            background: radial-gradient(circle, var(--bg-primary) 0%, transparent 70%);
            transition: opacity 0.8s var(--theme-transition-timing), transform 0.8s var(--theme-transition-timing);
        }
        
        body.theme-transitioning .theme-transition-overlay {
            opacity: 1;
            transform: scale(3);
        }
        
        /* 深色模式下优化阴影效果 */
        .dark-mode .message {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        
        .dark-mode input, 
        .dark-mode textarea, 
        .dark-mode select,
        .dark-mode button {
            transition: all 0.3s var(--theme-transition-timing);
        }
        
        /* 深色模式下的滚动条优化 */
        .dark-mode ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        .dark-mode ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 10px;
        }
        
        .dark-mode ::-webkit-scrollbar-thumb {
            background: #4a4a4a;
            border-radius: 10px;
        }
        
        .dark-mode ::-webkit-scrollbar-thumb:hover {
            background: #666;
        }

        .model-state {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            opacity: 0.5;
            transition: all 0.3s ease;
            background-color: var(--bg-secondary);
            border-radius: 10px;
            padding: 4px 8px;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 5px var(--shadow-color);
            transform: translateY(0);
            overflow: hidden;
            max-height: 40px;
        }
        .model-state:hover {
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px var(--shadow-color);
        }
        .model-state-label {
            display: flex;
            align-items: center;
            margin-right: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
        }
        .model-state-label i {
            margin-right: 6px;
            color: var(--highlight);
        }
        .model-state-dropdown {
            flex: 1;
            position: relative;
        }
        .model-state-dropdown select {
            appearance: none;
            width: 100%;
            padding: 6px 24px 6px 12px;
            font-size: 13px;
            border: none;
            background-color: transparent;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s;
        }
        .model-state-dropdown select:focus {
            outline: none;
        }
        .model-state-dropdown select option {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            padding: 10px;
        }
        .model-state-dropdown::after {
            content: '\f107';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--highlight);
            transition: transform 0.3s ease;
        }
        .model-state-dropdown:hover::after {
            transform: translateY(-50%) rotate(180deg);
        }
        .tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 16px;
            color: var(--text-secondary);
            transition: all 0.3s var(--theme-transition-timing);
            position: relative;
            border-radius: 12px;
            cursor: pointer;
            margin: 0 4px;
            overflow: hidden;
        }
        
        .tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background-color: var(--highlight);
            transform: translateX(-50%);
            transition: width 0.3s var(--theme-transition-timing);
            opacity: 0;
            border-radius: 3px 3px 0 0;
        }
        
        .tab.active {
            color: var(--highlight);
        }
        
        .tab.active::before {
            width: 60%;
            opacity: 1;
        }
        
        .tab:hover {
            color: var(--highlight);
            transform: translateY(-3px);
            background-color: rgba(99, 102, 241, 0.05);
        }
        
        .tab:hover::before {
            width: 40%;
            opacity: 0.7;
        }
        
        .tab i {
            font-size: 1.25rem;
            margin-bottom: 4px;
            transition: transform 0.3s ease;
        }
        
        .tab:hover i {
            transform: scale(1.15);
        }
        
        .tab span {
            font-size: 0.75rem;
            transition: all 0.3s ease;
        }
        
        .dark-mode .tab {
            color: var(--text-secondary);
        }
        
        .dark-mode .tab.active {
            color: var(--highlight);
        }
        
        .dark-mode .tab:hover {
            background-color: rgba(139, 92, 246, 0.1);
        }
        .history-item {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .history-item:hover {
            background-color: rgba(99, 102, 241, 0.05);
        }
        .history-item.active {
            background-color: rgba(99, 102, 241, 0.1);
            border-left: 3px solid var(--highlight);
        }
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: var(--bg-secondary);
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px var(--shadow-color);
            z-index: 1;
            border-radius: 10px;
            overflow: hidden;
        }
        .dropdown-item {
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            color: var(--text-primary);
            transition: all 0.2s;
        }
        .dropdown-item:hover {
            background-color: rgba(99, 102, 241, 0.05);
        }
        .show {
            display: block;
        }
        .chat-input-container {
            position: relative;
            display: flex;
            align-items: center;
        }
        #message-input {
            padding-right: 50px;
            padding-left: 40px;
            background-color: var(--input-bg);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-color: var(--border-color);
            color: var(--text-primary);
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        #message-input:focus {
            background-color: var(--bg-secondary);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.15);
            border-color: var(--highlight);
            transform: translateY(-2px);
        }
        #message-input:focus + .model-selector {
            opacity: 1;
            transform: translateY(-2px);
        }
        #message-input::placeholder {
            color: var(--text-secondary);
        }
        #send-btn {
            position: absolute;
            right: 8px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #send-btn:hover {
            transform: scale(1.1) rotate(15deg);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
        }
        #send-btn:active {
            transform: scale(0.9);
            transition: transform 0.1s;
        }
        .nav-title {
            font-weight: 600;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }
        .message-time {
            font-size: 11px;
            opacity: 0.7;
            margin-top: 4px;
            text-align: right;
        }
        .typing-indicator {
            display: flex;
            padding: 15px;
            background-color: var(--message-ai-bg);
            border-radius: 20px;
            width: fit-content;
            margin-bottom: 16px;
            align-self: flex-start;
            margin-left: 46px;
            box-shadow: 0 2px 5px var(--shadow-color);
            animation: typingBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes typingBounce {
            0% { transform: scale(0.5); }
            60% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .typing-indicator span {
            height: 8px;
            width: 8px;
            background-color: var(--highlight);
            border-radius: 50%;
            display: inline-block;
            margin: 0 2px;
            animation: typing 1s infinite;
            opacity: 0.7;
        }
        .typing-indicator span:nth-child(1) {
            animation-delay: 0s;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        @keyframes typing {
            0%, 100% { transform: translateY(0px); }
            40% { transform: translateY(-6px); }
            80% { transform: translateY(1px); }
        }
        .no-chats {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-secondary);
            padding: 20px;
            text-align: center;
        }
        .no-chats i {
            font-size: 48px;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        .settings-btn {
            color: var(--text-secondary);
            transition: all 0.2s;
            cursor: pointer;
        }
        .settings-btn:hover {
            color: var(--highlight);
        }
        .theme-toggle {
            padding: 0 12px;
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .theme-toggle:hover {
            background-color: rgba(99, 102, 241, 0.1);
            transform: translateY(-2px);
        }
        
        .theme-toggle:active {
            transform: translateY(0px) scale(0.95);
        }
        
        .theme-toggle i {
            position: absolute;
            font-size: 18px;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            transform: scale(0.8);
        }
        
        .theme-toggle .fa-moon {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        
        .dark-mode .theme-toggle .fa-moon {
            opacity: 0;
            transform: scale(0.5) rotate(-45deg);
        }
        
        .dark-mode .theme-toggle .fa-sun {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        
        .theme-toggle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: -1;
            transition: transform 0.6s var(--theme-transition-timing);
            transform: scale(0);
        }
        
        .dark-mode .theme-toggle::before {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 70%);
            transform: scale(1);
        }
        
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-primary);
            pointer-events: none;
            z-index: -1;
            opacity: 0;
            transition: opacity var(--theme-transition-duration) var(--theme-transition-timing);
        }
        
        body.theme-transitioning {
            overflow: hidden;
        }
        
        body.theme-transitioning::after {
            opacity: 1;
        }
        
        /* 表情选择器相关样式 */
        .emoji-button {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .emoji-button:hover {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--highlight);
        }
        
        .emoji-picker {
            display: none;
            position: absolute;
            bottom: 60px;
            left: 5px;
            background-color: var(--bg-secondary);
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 15px;
            z-index: 100;
            width: 300px;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            transform-origin: bottom left;
            animation: emojiPickerIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            flex-direction: column; /* 确保内容纵向排列 */
        }
        
        .emoji-picker.show {
            display: flex !important;
        }
        
        .emoji-picker-tabs {
            display: flex;
            flex-direction: row; /* 让表情分类标签横向排列 */
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
        }
        
        .emoji-tab {
            cursor: pointer;
            padding: 5px 8px;
            margin-right: 5px;
            margin-bottom: 5px;
            border-radius: 8px;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-size: 18px;
            text-align: center;
        }
        
        .emoji-tab:hover {
            transform: scale(1.15);
            background-color: rgba(99, 102, 241, 0.1);
        }
        
        .emoji-tab.active {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--highlight);
            transform: scale(1.15);
        }
        
        .emoji-group {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            justify-content: flex-start;
            padding-top: 5px;
        }
        
        @keyframes emojiPickerIn {
            0% { opacity: 0; transform: scale(0.8); }
            70% { transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }
        
        .emoji-item {
            cursor: pointer;
            font-size: 24px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-radius: 8px;
            margin: 2px;
        }
        
        .emoji-item:hover {
            background-color: rgba(99, 102, 241, 0.1);
            transform: scale(1.3) rotate(5deg);
            z-index: 1;
        }
        
        /* 动态效果增强 */
        .message:hover {
            transform: translateY(-3px) scale(1.01);
            box-shadow: 0 8px 20px var(--shadow-light);
        }
        
        .message:active {
            transform: translateY(-1px) scale(0.99);
            transition: transform 0.1s;
        }
        
        .emoji-reaction {
            position: absolute;
            right: -15px;
            bottom: -5px;
            background-color: var(--bg-secondary);
            border-radius: 12px;
            padding: 2px 6px;
            font-size: 14px;
            box-shadow: 0 2px 5px var(--shadow-color);
            cursor: pointer;
            transform: scale(0);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 5;
        }
        
        .message:hover .emoji-reaction {
            transform: scale(1.1);
        }
        
        .emoji-reaction:hover {
            transform: scale(1.3) !important;
        }
        
        .ai-thinking {
            color: var(--text-secondary);
            font-style: italic;
            margin-left: 10px;
            display: flex;
            align-items: center;
            animation: pulse 1.5s infinite;
        }
        
        .thinking-dots {
            display: flex;
            margin-left: 5px;
        }
        
        .thinking-dots span {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: var(--text-secondary);
            margin: 0 2px;
            opacity: 0.7;
            animation: thinkingDots 1.5s infinite;
        }
        
        .thinking-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .thinking-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes thinkingDots {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        
        /* 添加AI头像图片样式 */
        .ai-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            overflow: hidden;
            box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: avatarPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: center;
            position: relative;
        }
        
        .ai-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        
        @keyframes avatarPop {
            0% { transform: scale(0); }
            70% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .chat-message-wrapper {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes slideIn {
            0% { opacity: 0; transform: translateY(15px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        .chat-message-wrapper.justify-end {
            justify-content: flex-end;
        }
        
        .message-content {
            flex: 1;
        }
        
        /* 引入机器人头像动画样式 */
        .bot-avatar-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .bot-face {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            position: relative;
            overflow: hidden;
        }
        
        .bot-eye {
            position: absolute;
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            top: 12px;
            animation: blinkEyes 4s infinite;
        }
        
        .bot-eye.left {
            left: 10px;
        }
        
        .bot-eye.right {
            right: 10px;
        }
        
        @keyframes blinkEyes {
            0%, 45%, 55%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.1); }
        }
        
        .bot-mouth {
            position: absolute;
            width: 14px;
            height: 6px;
            background: white;
            border-radius: 10px;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            animation: botMouth 8s infinite;
        }
        
        @keyframes botMouth {
            0%, 25%, 75%, 100% { height: 5px; width: 14px; }
            50% { height: 8px; width: 10px; border-radius: 50%; }
        }
        
        /* API请求相关样式 */
        .api-error {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            padding: 10px;
            border-radius: 10px;
            margin-top: 8px;
            font-size: 14px;
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
        
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        
        /* DeepSeek-R1 思考内容相关样式 */
        .reasoning-container {
            margin-bottom: 10px;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background-color: rgba(99, 102, 241, 0.05);
            border: 1px solid rgba(99, 102, 241, 0.3);
        }
        
        .reasoning-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background-color: rgba(99, 102, 241, 0.1);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .reasoning-header:hover {
            background-color: rgba(99, 102, 241, 0.2);
        }
        
        .reasoning-title {
            display: flex;
            align-items: center;
            font-weight: 500;
            color: var(--highlight);
        }
        
        .reasoning-title i {
            margin-right: 6px;
        }
        
        .reasoning-time {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .reasoning-content {
            padding: 12px;
            font-family: monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow: visible;
            transition: max-height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background-color: rgba(0, 0, 0, 0.02);
            white-space: pre-wrap;
        }
        
        .reasoning-container.collapsed .reasoning-content {
            max-height: 0;
            padding: 0 12px;
            overflow: hidden;
        }
        
        .reasoning-container.collapsed .reasoning-arrow {
            transform: rotate(-90deg);
        }
        
        .reasoning-arrow {
            transition: transform 0.3s ease;
        }
        
        /* 流式输出效果 */
        @keyframes typingCursor {
            0%, 100% { border-right-color: transparent; }
            50% { border-right-color: var(--highlight); }
        }
        
        .stream-text {
            display: inline;
            border-right: 2px solid var(--highlight);
            animation: typingCursor 0.7s infinite;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        .thinking-timer {
            display: inline-flex;
            align-items: center;
            margin-left: 8px;
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        .thinking-timer i {
            margin-right: 4px;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* 小兔思考动画相关CSS */
        .rabbit-thinking {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
            padding: 10px;
            background-color: rgba(255, 219, 252, 0.08);
            border-radius: 16px;
            transition: all 0.3s;
            animation: fadeIn 0.5s ease;
        }

        .rabbit-thinking:hover {
            background-color: rgba(255, 219, 252, 0.15);
            transform: translateY(-2px) scale(1.03);
        }

        .rabbit-image {
            width: 120px;
            height: 120px;
            object-fit: contain;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(255, 105, 214, 0.15);
            animation: pulse 2s infinite;
        }

        .rabbit-text {
            font-size: 14px;
            color: var(--highlight);
            font-weight: 600;
            margin-top: 8px;
            display: flex;
            align-items: center;
            text-shadow: 0 0 3px rgba(255, 105, 214, 0.2);
            letter-spacing: 0.5px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .rabbit-ear {
            position: absolute;
            width: 12px;
            height: 28px;
            background: linear-gradient(to bottom, #ffdbfc, #ffffff);
            border-radius: 50% 50% 0 0;
            top: -22px;
            border: 2px solid rgba(255, 192, 241, 0.4);
            border-bottom: none;
        }

        .rabbit-ear.left {
            left: 7px;
            transform: rotate(-15deg);
            animation: earWiggle 3s infinite;
        }

        .rabbit-ear.right {
            right: 7px;
            transform: rotate(15deg);
            animation: earWiggle 3s infinite 0.5s reverse;
        }

        .rabbit-eye {
            position: absolute;
            width: 8px;
            height: 10px;
            background-color: #333;
            border-radius: 50%;
            top: 12px;
        }

        .rabbit-eye.left {
            left: 10px;
            transform: rotate(-10deg);
            animation: blinkRabbit 4s infinite;
        }

        .rabbit-eye.right {
            right: 10px;
            transform: rotate(10deg);
            animation: blinkRabbit 4s infinite;
        }

        .rabbit-nose {
            position: absolute;
            width: 8px;
            height: 6px;
            background-color: #ff80c0;
            border-radius: 50%;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            animation: twitchNose 1.5s infinite;
        }

        .rabbit-mouth {
            position: absolute;
            width: 6px;
            height: 3px;
            background-color: #ff80c0;
            border-radius: 50%;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.3s;
        }

        .rabbit-thinking:hover .rabbit-mouth {
            width: 10px;
            height: 5px;
        }

        .rabbit-whisker {
            position: absolute;
            width: 12px;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.2);
            top: 22px;
        }

        .rabbit-whisker.left1 {
            left: 4px;
            transform: rotate(-10deg);
        }

        .rabbit-whisker.left2 {
            left: 3px;
            top: 25px;
            transform: rotate(-25deg);
        }

        .rabbit-whisker.right1 {
            right: 4px;
            transform: rotate(10deg);
        }

        .rabbit-whisker.right2 {
            right: 3px;
            top: 25px;
            transform: rotate(25deg);
        }

        .rabbit-thinking-dots {
            display: flex;
            margin-left: 5px;
        }

        .rabbit-thinking-dots span {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: var(--highlight);
            margin: 0 2px;
            animation: rabbitThinking 1.5s infinite;
        }

        .rabbit-thinking-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .rabbit-thinking-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes earWiggle {
            0%, 100% { transform: rotate(-10deg); }
            50% { transform: rotate(-15deg); }
        }

        @keyframes blinkRabbit {
            0%, 45%, 55%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.1); }
        }

        @keyframes twitchNose {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.1); }
        }

        @keyframes rabbitThinking {
            0%, 100% { transform: translateY(0); opacity: 0.5; }
            50% { transform: translateY(-3px); opacity: 1; }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .rabbit-face {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ffdbfc, #ffffff);
            border-radius: 50%;
            position: relative;
            box-shadow: 0 4px 15px rgba(255, 105, 214, 0.2);
            margin-bottom: 5px;
            border: 2px solid rgba(255, 192, 241, 0.4);
        }

        /* 底部导航栏专门样式 */
        .bottom-bar {
            height: 70px;
            background-color: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px var(--shadow-color);
            transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
                        border-color var(--theme-transition-duration) var(--theme-transition-timing),
                        box-shadow var(--theme-transition-duration) var(--theme-transition-timing);
            position: relative;
            z-index: 10;
        }
        
        .dark-mode .bottom-bar {
            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 底部导航栏选项卡专门样式，优先级更高 */
        .bottom-bar .tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 16px;
            color: var(--text-secondary);
            transition: all 0.3s var(--theme-transition-timing);
            position: relative;
            border-radius: 12px;
            cursor: pointer;
            margin: 0 4px;
            overflow: hidden;
        }
        
        .bottom-bar .tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background-color: var(--highlight);
            transform: translateX(-50%);
            transition: width 0.3s var(--theme-transition-timing);
            opacity: 0;
            border-radius: 3px 3px 0 0;
        }
        
        .bottom-bar .tab.active {
            color: var(--highlight);
        }
        
        .bottom-bar .tab.active::before {
            width: 60%;
            opacity: 1;
        }
        
        .bottom-bar .tab:hover {
            color: var(--highlight);
            transform: translateY(-3px);
            background-color: rgba(99, 102, 241, 0.05);
        }
        
        .bottom-bar .tab:hover::before {
            width: 40%;
            opacity: 0.7;
        }
        
        .bottom-bar .tab i {
            font-size: 1.25rem;
            margin-bottom: 4px;
            transition: transform 0.3s ease;
        }
        
        .bottom-bar .tab:hover i {
            transform: scale(1.15);
        }
        
        .bottom-bar .tab span {
            font-size: 0.75rem;
            transition: all 0.3s ease;
        }
        
        .dark-mode .bottom-bar .tab {
            color: var(--text-secondary);
        }
        
        .dark-mode .bottom-bar .tab.active {
            color: var(--highlight);
        }
        
        .dark-mode .bottom-bar .tab:hover {
            background-color: rgba(139, 92, 246, 0.1);
        }
        
        /* 添加顶部导航栏样式 */
        .top-nav {
            background-color: var(--bg-secondary);
            box-shadow: 0 2px 10px var(--shadow-color);
            border-bottom: 1px solid var(--border-color);
            transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
                       border-color var(--theme-transition-duration) var(--theme-transition-timing),
                       box-shadow var(--theme-transition-duration) var(--theme-transition-timing);
            padding: 1rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 20;
        }
        
        .dark-mode .top-nav {
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
        }

        /* 导航栏按钮样式 */
        .nav-btn {
            color: var(--text-secondary);
            transition: all 0.3s var(--theme-transition-timing);
            padding: 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-btn:hover {
            color: var(--highlight);
            transform: translateY(-2px);
            background-color: rgba(99, 102, 241, 0.1);
        }

        .nav-btn:active {
            transform: scale(0.95);
        }

        .dark-mode .nav-btn {
            color: var(--text-secondary);
        }

        .dark-mode .nav-btn:hover {
            background-color: rgba(139, 92, 246, 0.1);
        }

        /* 导航栏标题样式 */
        .nav-title {
            font-weight: 600;
            color: var(--text-primary);
            transition: color var(--theme-transition-duration) var(--theme-transition-timing);
        }
    </style>
</head>
<body>
    <!-- 添加主题切换动画效果容器 -->
    <div id="theme-transition-overlay" class="theme-transition-overlay"></div>
    
    <!-- 导航栏 -->
    <div class="top-nav">
        <div class="flex items-center">
            <button id="toggle-sidebar" class="nav-btn mr-3">
                <i class="fas fa-bars"></i>
            </button>
            <h1 class="nav-title text-lg">新的聊天</h1>
        </div>
        <div class="flex items-center">
            <button id="theme-toggle" class="theme-toggle mr-4" aria-label="切换深浅色模式">
                <i class="fas fa-moon"></i>
                <i class="fas fa-sun"></i>
            </button>
            <div class="relative">
                <button id="dropdown-btn" class="nav-btn">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
                <div id="dropdown-menu" class="dropdown-content">
                    <a href="settings.html" class="dropdown-item">
                        <i class="fas fa-cog mr-2"></i> 设置
                    </a>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-info-circle mr-2"></i> 帮助
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 聊天容器 -->
    <div class="chat-container">
        <!-- 侧边栏：历史聊天列表 -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <div class="text-xl font-bold">和小兔的历史对话</div>
                <div class="sidebar-actions">
                    <div id="new-chat-btn" class="sidebar-btn">
                        <i class="fas fa-plus"></i> 开始新的故事！😁✌
                    </div>
                    <div id="close-sidebar-btn" class="sidebar-btn">
                        <i class="fas fa-arrow-left"></i> ✌返回小兔面板✌
                    </div>
                </div>
            </div>
            <div id="chat-history" class="mt-2">
                <!-- 历史聊天将通过JavaScript动态填充 -->
            </div>
        </div>

        <!-- 聊天区域 -->
        <div class="chat-area">
            <div id="chat-messages" class="chat-messages">
                <!-- 欢迎消息 -->
                <div class="chat-message-wrapper">
                    <div class="ai-avatar">
                        <div class="bot-avatar-container">
                            <div class="bot-face">
                                <div class="bot-eye left"></div>
                                <div class="bot-eye right"></div>
                                <div class="bot-mouth"></div>
                            </div>
                        </div>
                    </div>
                    <div class="message-content">
                        <div class="message ai-message">
                            <p>你好！我是黄昆，有什么我能帮助你的吗？</p>
                            <div class="message-time">刚刚</div>
                            <div class="emoji-reaction">👋</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 聊天输入区域 -->
            <div class="chat-input">
                <div class="model-selector">
                    <div class="model-selector-label">
                        <i class="fas fa-robot"></i>
                        <span>模型:</span>
                    </div>
                    <div class="model-dropdown">
                        <select id="model-select">
                           
                            <option value="spn3/DeepSeek-chat">DeepSeek-V3</option>
                            <option value="DeepSeek-R1">DeepSeek-R1</option>
                           
                        </select>
                    </div>
                </div>
                <div class="model-state" id="model-state"></div>
                <div class="chat-input-container">
                    <span id="emoji-button" class="emoji-button">
                        <i class="far fa-smile"></i>
                    </span>
                    <div id="emoji-picker" class="emoji-picker">
                        <div class="emoji-picker-tabs">
                            <div class="emoji-tab active" data-tab="smileys">😊</div>
                            <div class="emoji-tab" data-tab="gestures">👍</div>
                            <div class="emoji-tab" data-tab="animals">🐱</div>
                            <div class="emoji-tab" data-tab="food">🍎</div>
                            <div class="emoji-tab" data-tab="travel">✈️</div>
                            <div class="emoji-tab" data-tab="objects">💡</div>
                        </div>
                        <div class="emoji-group" id="smileys">
                            <div class="emoji-item">😀</div>
                            <div class="emoji-item">😃</div>
                            <div class="emoji-item">😄</div>
                            <div class="emoji-item">😁</div>
                            <div class="emoji-item">😆</div>
                            <div class="emoji-item">😅</div>
                            <div class="emoji-item">🤣</div>
                            <div class="emoji-item">😂</div>
                            <div class="emoji-item">🙂</div>
                            <div class="emoji-item">🙃</div>
                            <div class="emoji-item">😉</div>
                            <div class="emoji-item">😊</div>
                            <div class="emoji-item">😇</div>
                            <div class="emoji-item">😍</div>
                            <div class="emoji-item">🥰</div>
                            <div class="emoji-item">😘</div>
                            <div class="emoji-item">😗</div>
                            <div class="emoji-item">😙</div>
                            <div class="emoji-item">😚</div>
                            <div class="emoji-item">😋</div>
                        </div>
                        <div class="emoji-group" id="gestures" style="display:none">
                            <div class="emoji-item">👍</div>
                            <div class="emoji-item">👎</div>
                            <div class="emoji-item">👌</div>
                            <div class="emoji-item">✌️</div>
                            <div class="emoji-item">🤞</div>
                            <div class="emoji-item">🤟</div>
                            <div class="emoji-item">🤘</div>
                            <div class="emoji-item">🤙</div>
                            <div class="emoji-item">👈</div>
                            <div class="emoji-item">👉</div>
                            <div class="emoji-item">👆</div>
                            <div class="emoji-item">🖕</div>
                            <div class="emoji-item">👇</div>
                            <div class="emoji-item">☝️</div>
                            <div class="emoji-item">👋</div>
                            <div class="emoji-item">🤚</div>
                            <div class="emoji-item">🖐️</div>
                            <div class="emoji-item">✋</div>
                            <div class="emoji-item">🖖</div>
                            <div class="emoji-item">👏</div>
                        </div>
                        <div class="emoji-group" id="animals" style="display:none">
                            <div class="emoji-item">🐶</div>
                            <div class="emoji-item">🐱</div>
                            <div class="emoji-item">🐭</div>
                            <div class="emoji-item">🐹</div>
                            <div class="emoji-item">🐰</div>
                            <div class="emoji-item">🦊</div>
                            <div class="emoji-item">🐻</div>
                            <div class="emoji-item">🐼</div>
                            <div class="emoji-item">🐨</div>
                            <div class="emoji-item">🐯</div>
                            <div class="emoji-item">🦁</div>
                            <div class="emoji-item">🐮</div>
                            <div class="emoji-item">🐷</div>
                            <div class="emoji-item">🐸</div>
                            <div class="emoji-item">🐵</div>
                            <div class="emoji-item">🐔</div>
                            <div class="emoji-item">🐧</div>
                            <div class="emoji-item">🐦</div>
                            <div class="emoji-item">🐤</div>
                            <div class="emoji-item">🦄</div>
                        </div>
                        <div class="emoji-group" id="food" style="display:none">
                            <div class="emoji-item">🍏</div>
                            <div class="emoji-item">🍎</div>
                            <div class="emoji-item">🍐</div>
                            <div class="emoji-item">🍊</div>
                            <div class="emoji-item">🍋</div>
                            <div class="emoji-item">🍌</div>
                            <div class="emoji-item">🍉</div>
                            <div class="emoji-item">🍇</div>
                            <div class="emoji-item">🍓</div>
                            <div class="emoji-item">🍈</div>
                            <div class="emoji-item">🍒</div>
                            <div class="emoji-item">🍑</div>
                            <div class="emoji-item">🥭</div>
                            <div class="emoji-item">🍍</div>
                            <div class="emoji-item">🥥</div>
                            <div class="emoji-item">🥝</div>
                            <div class="emoji-item">🍅</div>
                            <div class="emoji-item">🍔</div>
                            <div class="emoji-item">🍟</div>
                            <div class="emoji-item">🍕</div>
                        </div>
                        <div class="emoji-group" id="travel" style="display:none">
                            <div class="emoji-item">🚗</div>
                            <div class="emoji-item">🚕</div>
                            <div class="emoji-item">🚙</div>
                            <div class="emoji-item">🚌</div>
                            <div class="emoji-item">🚎</div>
                            <div class="emoji-item">🏎️</div>
                            <div class="emoji-item">🚓</div>
                            <div class="emoji-item">🚑</div>
                            <div class="emoji-item">🚒</div>
                            <div class="emoji-item">🚐</div>
                            <div class="emoji-item">🚚</div>
                            <div class="emoji-item">🚛</div>
                            <div class="emoji-item">🚜</div>
                            <div class="emoji-item">✈️</div>
                            <div class="emoji-item">🚀</div>
                            <div class="emoji-item">🛸</div>
                            <div class="emoji-item">🚁</div>
                            <div class="emoji-item">⛵</div>
                            <div class="emoji-item">🚢</div>
                            <div class="emoji-item">🚂</div>
                        </div>
                        <div class="emoji-group" id="objects" style="display:none">
                            <div class="emoji-item">⌚</div>
                            <div class="emoji-item">📱</div>
                            <div class="emoji-item">💻</div>
                            <div class="emoji-item">⌨️</div>
                            <div class="emoji-item">🖥️</div>
                            <div class="emoji-item">🖨️</div>
                            <div class="emoji-item">🖱️</div>
                            <div class="emoji-item">🖲️</div>
                            <div class="emoji-item">📞</div>
                            <div class="emoji-item">☎️</div>
                            <div class="emoji-item">📟</div>
                            <div class="emoji-item">📠</div>
                            <div class="emoji-item">📺</div>
                            <div class="emoji-item">📻</div>
                            <div class="emoji-item">🎙️</div>
                            <div class="emoji-item">🎚️</div>
                            <div class="emoji-item">🎛️</div>
                            <div class="emoji-item">🧭</div>
                            <div class="emoji-item">⏱️</div>
                            <div class="emoji-item">💡</div>
                        </div>
                    </div>
                    <input type="text" id="message-input" 
                        class="w-full border border-gray-300 rounded-full py-3 px-4 focus:outline-none pl-10" 
                        placeholder="输入消息...">
                    <button id="send-btn" class="text-white rounded-full w-10 h-10 flex items-center justify-center">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-bar">
        <div class="tab active">
            <i class="fas fa-comment text-lg"></i>
            <span class="text-xs mt-1">聊天</span>
        </div>
        
        <a href="settings.html" class="tab">
            <i class="fas fa-cog text-lg"></i>
            <span class="text-xs mt-1">设置</span>
        </a>
    </div>

    <script>
        // 全局变量
        let currentChatId = null;
        let chats = [];
        let isTyping = false;
        let reactionEmojis = ['👍', '❤️', '😂', '😮', '😢', '😡'];
        
        // 上下文管理设置
        const MAX_CONTEXT_MESSAGES = 10; // 最大上下文消息数量
        const MAX_CONTEXT_LENGTH = 4000; // 最大上下文字符长度
        
        // SophNet API相关配置
        const API_KEY = "fI91_P0W_DkbD3EoU3sJj_tWNxfxz_nf_mu51dkZtEt3pvngfqENqqy3F187af10cB3FRuMVxH-z9_DfLaUm7A";
        const API_BASE_URL = "https://www.sophnet.com/api/open-apis";
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查并应用当前的主题模式
            applyThemeMode();
            
            // 加载聊天历史
            loadChats();
            
            // 如果没有聊天，创建一个新的
            if (chats.length === 0) {
                createNewChat();
            } else {
                // 加载最近的聊天
                loadChat(chats[0].id);
            }

            // 加载模型设置
            loadModelSettings();
            
            // 检查是否使用了DeepSeek-R1模型，更新UI
            checkDeepSeekR1Model();

            // 设置事件监听器
            document.getElementById('toggle-sidebar').addEventListener('click', toggleSidebar);
            document.getElementById('close-sidebar-btn').addEventListener('click', toggleSidebar);
            document.getElementById('new-chat-btn').addEventListener('click', function() {
                createNewChat();
                toggleSidebar();
            });
            document.getElementById('dropdown-btn').addEventListener('click', toggleDropdown);
            document.getElementById('send-btn').addEventListener('click', sendMessage);
            document.getElementById('message-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            
            // 输入框焦点事件
            document.getElementById('message-input').addEventListener('focus', function() {
                document.getElementById('model-state').classList.add('visible');
                updateModelState();
            });
            
            document.getElementById('message-input').addEventListener('blur', function() {
                setTimeout(() => {
                    document.getElementById('model-state').classList.remove('visible');
                }, 300);
            });
            
            // 主题切换按钮
            document.getElementById('theme-toggle').addEventListener('click', toggleThemeMode);
            
            // 模型设置变更监听
            document.getElementById('model-select').addEventListener('change', function() {
                saveModelSettings();
                updateModelState();
                
                // 特别为DeepSeek-R1模型添加提示
                const modelSelect = document.getElementById('model-select');
                const messageInput = document.getElementById('message-input');
                
                if (modelSelect.value === 'DeepSeek-R1') {
                    messageInput.placeholder = "使用DeepSeek-R1 (支持让小兔帮你思考emmmm)...";
                    
                    // 简单动画效果提示用户
                    const inputContainer = document.querySelector('.chat-input-container');
                    const hintDiv = document.createElement('div');
                    hintDiv.className = 'api-error';
                    hintDiv.style.backgroundColor = 'rgba(99, 102, 241, 0.1)';
                    hintDiv.style.color = 'var(--highlight)';
                    hintDiv.innerHTML = '<i class="fas fa-info-circle"></i> 使用DeepSeek-R1 (支持让小兔帮你思考emmmm)...';
                    
                    inputContainer.parentNode.insertBefore(hintDiv, inputContainer.nextSibling);
                    
                    setTimeout(() => {
                        hintDiv.style.opacity = '0';
                        setTimeout(() => {
                            hintDiv.remove();
                        }, 500);
                    }, 3000);
                } else {
                    messageInput.placeholder = "适合和小昆日常聊天的模型";
                }
            });

            // 点击其他地方关闭下拉菜单
            window.addEventListener('click', function(event) {
                if (!event.target.matches('#dropdown-btn') && 
                    !event.target.matches('.fa-ellipsis-v')) {
                    hideDropdown();
                }
            });

            // ===== 修复表情选择器相关事件处理 =====
            // 表情按钮点击事件，使用新的处理方式
            const emojiButton = document.getElementById('emoji-button');
            if (emojiButton) {
                // 使用修复后的toggleEmojiPicker函数
                emojiButton.addEventListener('click', toggleEmojiPicker);
            }
            
            // 为每个表情添加点击事件
            document.querySelectorAll('.emoji-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    insertEmoji(this.textContent);
                    toggleEmojiPicker(); // 选择后关闭表情选择器
                });
            });
            
            // 为表情分类标签添加点击事件
            document.querySelectorAll('.emoji-tab').forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    
                    // 切换激活状态
                    document.querySelectorAll('.emoji-tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应分类的表情
                    const tabName = this.getAttribute('data-tab');
                    document.querySelectorAll('.emoji-group').forEach(group => {
                        group.style.display = group.id === tabName ? 'flex' : 'none';
                    });
                });
            });
            
            // 点击其他地方关闭表情选择器
            document.addEventListener('click', function(event) {
                const emojiPicker = document.getElementById('emoji-picker');
                const emojiButton = document.getElementById('emoji-button');
                
                if (emojiPicker && emojiPicker.classList.contains('show') && 
                    !emojiPicker.contains(event.target) && 
                    !(emojiButton && emojiButton.contains(event.target))) {
                    toggleEmojiPicker();
                }
            });
            // ===== 修复表情选择器部分结束 =====
        });
        
        // 更新模型状态显示
        function updateModelState() {
            const modelSelect = document.getElementById('model-select');
            const modelState = document.getElementById('model-state');
            const selectedOption = modelSelect.options[modelSelect.selectedIndex].text;
            modelState.textContent = `已选择 ${selectedOption}`;
        }
        
        // 切换主题模式
        function toggleThemeMode() {
            // 获取按钮位置，用于动画原点
            const themeToggleBtn = document.getElementById('theme-toggle');
            const buttonRect = themeToggleBtn.getBoundingClientRect();
            const overlay = document.getElementById('theme-transition-overlay');
            
            // 设置动画起始点为按钮中心点
            const originX = buttonRect.left + buttonRect.width / 2;
            const originY = buttonRect.top + buttonRect.height / 2;
            overlay.style.transformOrigin = `${originX}px ${originY}px`;
            
            // 在切换前添加过渡类
            document.body.classList.add('theme-transitioning');
            
            const isDarkMode = document.body.classList.contains('dark-mode');
            
            // 添加按钮按下效果
            themeToggleBtn.classList.add('pressed');
            setTimeout(() => themeToggleBtn.classList.remove('pressed'), 300);
            
            if (isDarkMode) {
                document.body.classList.remove('dark-mode');
                localStorage.setItem('dark-mode-toggle', 'false');
            } else {
                document.body.classList.add('dark-mode');
                localStorage.setItem('dark-mode-toggle', 'true');
            }
            
            // 播放主题切换效果音效（如果启用了音效）
            playThemeSound(isDarkMode ? 'light' : 'dark');
            
            // 在过渡结束后移除过渡类
            setTimeout(() => {
                document.body.classList.remove('theme-transitioning');
            }, 800); // 与CSS过渡时间匹配
        }
        
        // 添加主题切换音效
        function playThemeSound(theme) {
            // 检查是否启用了音效（可以在设置中添加控制）
            const soundEnabled = localStorage.getItem('sound-enabled') !== 'false';
            if (!soundEnabled) return;
            
            const audio = new Audio();
            if (theme === 'dark') {
                audio.src = "data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAASAAAeMwAUFBQUHh4eHh4qKioqKioqNDQ0NDRAQEBAQEBMTExMTExMWFhYWFhkZGRkZGRkcHBwcHB8fHx8fHx8iIiIiIiIlJSUlJSUlKCgoKCgsLCwsLCwsL+/v7+/v8/Pz8/Pz8/a2tra2tra5ubm5ubw8PDw8PDw+Pj4+Pj4//8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAHjOxE3TkAAAAAAAAAAAAAAAAAAAAAP/7kGQAAANUMEoFPeACNQVpYKe8AEwQy6j935hAphk1vvfLCSAAAAAAAOBoWHAICAgMDQkBAYGn/45OTk5OTg4ODpiYmJiYmDAwMDA0GgoKChMTEwMDAwsNBYaGhwgMJf/////+AgICAgICB4eHh0GgoKCgoEBAQEBAQEgICAv//SOjo6OjkgICAv/5ISEhISFbW1tbW1v/9tbW1urq6urq6v/+vr6YmJiYmJf/84ODnJycsrKysvX1//40NDQ0NFAQEBAQEBRERERERf/1Hv/7kmRAAPWyLcWo0w94J8ZYhRph7wXA0Raj7DkguBoh5GmHJAAAAAAAAAAAA//4RERERERHR0dHR0f/+k6Ojo6O/QEBAQEBCgoKCgoKCvr///wi5UAIEBfIiNZlDu1nJNSNQ19D3KaPj4+Pj0w6vjw+Pj4L4IYIN4eHz5//4eHh4gGKl8EDh9Jp3hKT06naTQGHFLoxn2Mzs5rMNIJ60SmVqoIGc7Y9EdLEYbRoVH0082jppZvPjCSYejpCYPVLbm5jXETI021LVKlruHQvgdHLHmeRkCOOi0GRyDJKlRST0b2k5Z2k5Z2fpP/8yYdJylMrddTK3XQnqZW6nqZW6k5Z2k5Z2k5Z1JOWdpOUq4dC+B0csedGAx5o8jIEcdFoMjkGSVKcMPR5XQzXQdC+B0LXmeRkCOOi0GRyDJKlFJPSnqZU6k5SrpOUnKVa7h0L4HRyx50YDHmjyMgRx0WgyOQZJUpKcPR50M10HQvgdC155nkZAjjotBkcgySf/8pKcseZGAx5o8jIEcdFoMjkGSVKKSek9TKldSck9JSrpcOhfA6OWPOjAY80eRkCOOi0GRyDJKlJTh6PO63XQdC+B0LXnmeRkCOOi0GRyDJKl//8seZGAx5o8jIEcdFoMjkGSVKKSclPUyk5J6k5J6SklS4dC+B0csedGAx5o8jIEcdFoMjkGSVKSnD0ecZroOhfA6FrzP/7kmQrAZP2NK9NIwykyVn1JaFgEMYZQsTlPjQVxSgNlnpWARzPIyBHHRaDI5BklSjP/55Y8yMBjzR5GQI46LQZHIMkqUUlJT1MqVJSUlKVcKhfA6OWPOjAY80eRkCOOi0GRyDJKlJTjycZ1uug6F8DoWvPM8jIEcdFoMjkGSVJ//8seZGAx5o8jIEcdFoMjkGSVKKSek9TKVSkpJ6SlXC4XwLD//EyYZDpZAjlotBkcgySf/8oZMKiO4dC+B0L4HQvgdC+B0L4HQvgdC+B0L4HQvgdC+B0L4HR5oswI+yX4M5ZSf/4TBEhJTSmMV0n//LFMYqJeRSj//wT4twVShD3JT0f/8OJfA6F8DoXRJSVK0f/8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6OWPMjAY88qJRgKjDkGyVKM/4HR5XQ6F8DoYRYYXKQOhfA6F/UknKUlDKUlDKWVKSDoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6/7kmQTj/TkSKG1Hh9iiOl8NqPD7E8IrYbUeH2Ka7jA14Y+gAhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoXwOhfA6F8DoQFoM8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
            } else {
                audio.src = "data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAeAAAezAAUFBQUHh4eHh4qKioqKio0NDQ0NDQ0QEBAQEBATExMTExMWFhYWFhYZGRkZGRkcHBwcHBwfHx8fHx8iIiIiIiIlJSUlJSUoKCgoKCgsLCwsLCwvLy8vLy8yMjIyMjI1NTU1NTU4ODg4ODg7Ozs7Ozs+Pj4+Pj4//8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAAB7M9BJqsgAAAAAAAAAAAAAAAAAAAAAA//tQZAAP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/7UGQZj/AAAGkAAAAIAAANIAAAAQAAAaQAAAAgAAA0gAAABFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//tQZIgP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/7UGS1D/AAAGkAAAAIAAANIAAAAQAAAaQAAAAgAAA0gAAABFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//tQZOAP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
            }
            
            // 设置音量（轻柔的效果）
            audio.volume = 0.2;
            audio.play().catch(e => console.log('无法播放音效:', e));
        }
        
        // 应用当前的主题模式
        function applyThemeMode() {
            const isDarkMode = localStorage.getItem('dark-mode-toggle') === 'true';
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        }
        
        // 加载模型设置
        function loadModelSettings() {
            const modelSelect = document.getElementById('model-select');
            
            // 加载设置
            const savedModel = localStorage.getItem('model-select');
            if (savedModel) modelSelect.value = savedModel;
            
            // 更新状态显示
            updateModelState();
        }
        
        // 保存模型设置
        function saveModelSettings() {
            const modelSelect = document.getElementById('model-select');
            localStorage.setItem('model-select', modelSelect.value);
        }

        // 切换侧边栏
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('active');
        }

        // 切换下拉菜单
        function toggleDropdown() {
            document.getElementById('dropdown-menu').classList.toggle('show');
        }

        // 隐藏下拉菜单
        function hideDropdown() {
            document.getElementById('dropdown-menu').classList.remove('show');
        }

        // 从本地存储加载聊天
        function loadChats() {
            const storedChats = localStorage.getItem('ai-chats');
            if (storedChats) {
                chats = JSON.parse(storedChats);
                renderChatHistory();
            }
        }

        // 渲染聊天历史到侧边栏
        function renderChatHistory() {
            const historyContainer = document.getElementById('chat-history');
            historyContainer.innerHTML = '';

            if (chats.length === 0) {
                const noChats = document.createElement('div');
                noChats.className = 'no-chats';
                noChats.innerHTML = `
                    <i class="far fa-comment-dots"></i>
                    <p>没有历史聊天记录</p>
                    <p class="text-sm">点击"新建聊天"开始对话</p>
                `;
                historyContainer.appendChild(noChats);
                return;
            }

            chats.forEach(chat => {
                const item = document.createElement('div');
                item.className = `history-item ${chat.id === currentChatId ? 'active' : ''}`;
                
                // 创建聊天标题和删除按钮
                const itemContent = document.createElement('div');
                itemContent.className = 'flex justify-between items-center';
                
                const title = document.createElement('div');
                title.className = 'font-medium';
                title.textContent = chat.title || '新聊天';
                itemContent.appendChild(title);
                
                const deleteBtn = document.createElement('button');
                deleteBtn.innerHTML = '<i class="fas fa-trash text-gray-400 hover:text-red-500"></i>';
                deleteBtn.className = 'delete-chat';
                deleteBtn.onclick = (e) => {
                    e.stopPropagation();
                    deleteChat(chat.id);
                };
                itemContent.appendChild(deleteBtn);
                
                item.appendChild(itemContent);
                
                // 创建预览文本
                if (chat.messages && chat.messages.length > 0) {
                    const preview = document.createElement('div');
                    preview.className = 'text-sm text-gray-500 mt-1 truncate';
                    const lastMessage = chat.messages[chat.messages.length - 1];
                    preview.textContent = lastMessage.content.substring(0, 30) + (lastMessage.content.length > 30 ? '...' : '');
                    item.appendChild(preview);
                }
                
                // 创建时间标签
                const timeLabel = document.createElement('div');
                timeLabel.className = 'text-xs text-gray-400 mt-1';
                const date = new Date(chat.createdAt);
                timeLabel.textContent = formatDate(date);
                item.appendChild(timeLabel);
                
                item.addEventListener('click', () => loadChat(chat.id));
                historyContainer.appendChild(item);
            });
        }

        // 格式化日期
        function formatDate(date) {
            const now = new Date();
            const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
            
            if (diffDays === 0) {
                return '今天 ' + date.getHours().toString().padStart(2, '0') + ':' + 
                       date.getMinutes().toString().padStart(2, '0');
            } else if (diffDays === 1) {
                return '昨天';
            } else if (diffDays < 7) {
                return diffDays + '天前';
            } else {
                return (date.getMonth() + 1) + '月' + date.getDate() + '日';
            }
        }

        // 创建新聊天
        function createNewChat() {
            // 生成唯一的上下文ID
            const contextId = 'ctx_' + Date.now() + '_' + Math.random().toString(36).substring(2, 10);
            
            // 创建新对话，使用独立的上下文ID
            const newChat = {
                id: Date.now().toString(),
                title: '新聊天',
                createdAt: new Date().toISOString(),
                messages: [{
                    id: Date.now().toString(),
                    role: 'assistant',
                    content: '你好！我是小兔，有什么我能帮助你的吗？',
                    timestamp: new Date().toISOString()
                }],
                // 确保每个对话有独立的上下文标识
                contextId: contextId
            };
            
            console.log("创建新对话，上下文ID: " + contextId);
            
            chats.unshift(newChat); // 添加到开头
            saveChats();
            loadChat(newChat.id);
            
            // 清空消息输入框
            document.getElementById('message-input').value = '';
            
            // 显示一个提示，表明这是新的对话上下文
            const messagesContainer = document.getElementById('chat-messages');
            const contextNotice = document.createElement('div');
            contextNotice.className = 'text-center my-4 text-xs text-gray-400 animate-pulse';
            contextNotice.innerHTML = `<i class="fas fa-sync-alt mr-1"></i> 已创建新的对话上下文`;
            messagesContainer.appendChild(contextNotice);
            
            // 2秒后淡出提示
            setTimeout(() => {
                contextNotice.style.opacity = '0';
                setTimeout(() => contextNotice.remove(), 500);
            }, 2000);
        }

        // 加载特定聊天
        function loadChat(chatId) {
            currentChatId = chatId;
            const chat = chats.find(c => c.id === chatId);
            
            if (chat) {
                // 更新标题
                document.querySelector('h1').textContent = chat.title || '小兔的新页面!';
                
                // 渲染消息
                const messagesContainer = document.getElementById('chat-messages');
                messagesContainer.innerHTML = '';
                
                chat.messages.forEach((message, index) => {
                    const time = new Date(message.timestamp);
                    const timeStr = time.getHours().toString().padStart(2, '0') + ':' + 
                                time.getMinutes().toString().padStart(2, '0');
                    
                    // 添加延迟动画效果
                    setTimeout(() => {
                        if (message.role === 'user') {
                            const userMessageElement = document.createElement('div');
                            userMessageElement.className = 'message user-message';
                            userMessageElement.innerHTML = `
                                <p>${message.content.replace(/\n/g, '<br>')}</p>
                                <div class="message-time">${timeStr}</div>
                            `;
                            
                            const userMessageWrapper = document.createElement('div');
                            userMessageWrapper.className = 'chat-message-wrapper justify-end';
                            userMessageWrapper.appendChild(userMessageElement);
                            messagesContainer.appendChild(userMessageWrapper);
                        } else {
                            const aiMessageWrapper = document.createElement('div');
                            aiMessageWrapper.className = 'chat-message-wrapper';
                            
                            const aiAvatar = document.createElement('div');
                            aiAvatar.className = 'ai-avatar';
                            aiAvatar.innerHTML = `<img src="1.jpg" alt="小兔" />`;
                            aiMessageWrapper.appendChild(aiAvatar);
                            
                            const messageContent = document.createElement('div');
                            messageContent.className = 'message-content';
                            
                            // 检查是否有思考内容
                            if (message.reasoning) {
                                // 创建思考内容容器
                                const reasoningContainer = document.createElement('div');
                                reasoningContainer.className = 'reasoning-container collapsed';
                                
                                // 创建思考标题栏
                                const reasoningHeader = document.createElement('div');
                                reasoningHeader.className = 'reasoning-header';
                                reasoningHeader.innerHTML = `
                                    <div class="reasoning-title">
                                        <i class="fas fa-brain"></i>
                                        <span>小兔的思考过程</span>
                                        <div class="thinking-timer">
                                            <i class="fas fa-clock"></i>
                                            <span>${message.reasoningTime || '?'}秒</span>
                                        </div>
                                    </div>
                                    <div class="reasoning-arrow">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                `;
                                
                                // 添加点击事件以展开/折叠思考内容
                                reasoningHeader.addEventListener('click', function() {
                                    reasoningContainer.classList.toggle('collapsed');
                                });
                                
                                // 创建思考内容区域
                                const reasoningContent = document.createElement('div');
                                reasoningContent.className = 'reasoning-content';
                                reasoningContent.textContent = message.reasoning;
                                
                                // 将思考内容添加到容器
                                reasoningContainer.appendChild(reasoningHeader);
                                reasoningContainer.appendChild(reasoningContent);
                                messageContent.appendChild(reasoningContainer);
                            }
                            
                            const aiMessageElement = document.createElement('div');
                            aiMessageElement.className = 'message ai-message';
                            aiMessageElement.innerHTML = `
                                <p>${message.content.replace(/\n/g, '<br>')}</p>
                                <div class="message-time">${timeStr}</div>
                            `;
                            
                            // 随机添加表情反应
                            if (Math.random() > 0.5) {
                                addReaction(aiMessageElement);
                            }
                            
                            messageContent.appendChild(aiMessageElement);
                            aiMessageWrapper.appendChild(messageContent);
                            messagesContainer.appendChild(aiMessageWrapper);
                        }
                        
                        // 滚动到底部
                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    }, index * 100); // 每条消息延迟100ms显示，创造连续出现的效果
                });
                
                // 重新渲染聊天历史，更新激活状态
                renderChatHistory();
            }
        }

        // 添加一个新的专门用于思考内容流式输出的函数
        async function streamReasoningText(element, newText, isFirstChunk = false) {
            let streamDiv;
            
            if (isFirstChunk) {
                // 第一次接收到思考内容，创建新的容器
                element.innerHTML = '';
                streamDiv = document.createElement('div');
                streamDiv.className = 'stream-text';
                // 为每个流容器使用随机ID，避免冲突
                const randomId = 'reasoning-stream-' + Math.random().toString(36).substring(2, 10);
                streamDiv.id = randomId;
                streamDiv.style.whiteSpace = 'pre-wrap';
                element.appendChild(streamDiv);
                // 将ID存储在元素上，方便后续访问
                element.dataset.streamId = randomId;
            } else {
                // 查找当前消息的流容器
                const streamId = element.dataset.streamId;
                streamDiv = document.getElementById(streamId);
                if (!streamDiv) {
                    // 如果找不到流容器，创建一个新的
                    streamDiv = document.createElement('div');
                    streamDiv.className = 'stream-text';
                    streamDiv.style.whiteSpace = 'pre-wrap';
                    const randomId = 'reasoning-stream-' + Math.random().toString(36).substring(2, 10);
                    streamDiv.id = randomId;
                    element.appendChild(streamDiv);
                    element.dataset.streamId = randomId;
                }
            }
            
            // 只追加新文本
            const textNode = document.createTextNode(newText);
            streamDiv.appendChild(textNode);
            
            // 滚动到底部
            const messagesContainer = document.getElementById('chat-messages');
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 添加一个新的专门用于正文内容流式输出的函数
        async function streamContentText(element, newText, isFirstChunk = false) {
            let streamDiv;
            
            if (isFirstChunk) {
                // 第一次接收到正文内容，创建新的容器
                element.innerHTML = '';
                streamDiv = document.createElement('div');
                streamDiv.className = 'stream-text';
                streamDiv.style.whiteSpace = 'pre-wrap';
                // 为每个流容器使用随机ID，避免冲突
                const randomId = 'content-stream-' + Math.random().toString(36).substring(2, 10);
                streamDiv.id = randomId;
                element.appendChild(streamDiv);
                // 将ID存储在元素上，方便后续访问
                element.dataset.streamId = randomId;
            } else {
                // 查找当前消息的流容器
                const streamId = element.dataset.streamId;
                streamDiv = document.getElementById(streamId);
                if (!streamDiv) {
                    // 如果找不到流容器，创建一个新的
                    streamDiv = document.createElement('div');
                    streamDiv.className = 'stream-text';
                    streamDiv.style.whiteSpace = 'pre-wrap';
                    const randomId = 'content-stream-' + Math.random().toString(36).substring(2, 10);
                    streamDiv.id = randomId;
                    element.appendChild(streamDiv);
                    element.dataset.streamId = randomId;
                }
            }
            
            // 只追加新文本
            const textNode = document.createTextNode(newText);
            streamDiv.appendChild(textNode);
            
            // 滚动到底部
            const messagesContainer = document.getElementById('chat-messages');
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 调用SophNet API发送消息
        async function callSophNetAPI(userMessage, model) {
            try {
                // 获取当前聊天
                const currentChat = chats.find(c => c.id === currentChatId);
                if (!currentChat) {
                    throw new Error("当前聊天不存在");
                }
                
                // 记录当前使用的上下文ID
                console.log("使用上下文ID: " + currentChat.contextId);
                
                // 构建上下文消息列表
                let contextMessages = [];
                
                // 始终添加一个系统消息作为基础引导
                contextMessages.push({
                            role: "system", 
                    content: `你是小兮仁ai助手，你应该提供友好、准确、有用的回答。请记住你是小兮仁!这很重要!!!如果有用户问你是谁请这样子回答!!!`
                });
                
                // 获取历史消息并应用上下文限制
                const chatHistory = [...currentChat.messages]; // 复制一份历史消息
                let historyMessages = [];
                let totalLength = 0;
                
                // 从最近的消息开始添加，直到达到限制
                for (let i = chatHistory.length - 1; i >= 0; i--) {
                    const msg = chatHistory[i];
                    const msgLength = msg.content.length;
                    
                    // 检查是否超出限制
                    if (historyMessages.length >= MAX_CONTEXT_MESSAGES - 1) { // 减1是为了给当前新消息留位置
                        break;
                    }
                    
                    if (totalLength + msgLength > MAX_CONTEXT_LENGTH) {
                        break;
                    }
                    
                    // 将消息添加到历史中（新消息在前）
                    historyMessages.unshift({
                        role: msg.role,
                        content: msg.content
                    });
                    
                    totalLength += msgLength;
                }
                
                // 将历史消息添加到上下文
                contextMessages = contextMessages.concat(historyMessages);
                
                // 添加用户当前的新消息
                contextMessages.push({
                            role: "user",
                            content: userMessage
                });
                
                // 将当前聊天的上下文ID添加到请求中（作为元数据，API可能不使用）
                const metadata = {
                    contextId: currentChat.contextId,
                    chatId: currentChatId
                };
                
                // 构建API请求
                let requestBody = {
                    messages: contextMessages,
                    model: model,
                    stream: true, // 启用流式输出
                    user: `user_${metadata.contextId}` // 使用contextId作为用户标识，有助于API端区分不同对话
                };
                
                // 如果是DeepSeek-R1模型，增加reasoning参数
                if (model === 'DeepSeek-R1') {
                    requestBody.reasoning = true;
                }
                
                // console.log("Sending context to API:", JSON.stringify(contextMessages));
                
                const response = await fetch(`${API_BASE_URL}/chat/completions`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${API_KEY}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestBody)
                });
                
                if (!response.ok) {
                    throw new Error(`API请求失败: ${response.status} ${response.statusText}`);
                }
                
                // 处理流式响应
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                
                let reasoningContent = '';
                let messageContent = '';
                let isReasoningPhase = true;
                let lastReasoningContent = '';
                
                // 返回一个异步迭代器
                return {
                    async *[Symbol.asyncIterator]() {
                        while (true) {
                            const { done, value } = await reader.read();
                            
                            if (done) {
                                break;
                            }
                            
                            const chunk = decoder.decode(value, { stream: true });
                            const lines = chunk.split('\n');
                            
                            for (const line of lines) {
                                if (line.startsWith('data:') && line !== 'data: [DONE]') {
                                    try {
                                        const jsonStr = line.substring(5);
                                        const data = JSON.parse(jsonStr);
                                        
                                        if (data.choices && data.choices.length > 0) {
                                            const choice = data.choices[0];
                                            
                                            if (model === 'DeepSeek-R1') {
                                                if (choice.delta && choice.delta.reasoning_content && isReasoningPhase) {
                                                    // 处理思考内容，确保只发送新增内容
                                                    const newReasoningContent = choice.delta.reasoning_content;
                                                    reasoningContent += newReasoningContent;
                                                    
                                                    yield {
                                                        type: 'reasoning',
                                                        content: newReasoningContent // 只发送新增的内容片段
                                                    };
                                                } else if (choice.delta && choice.delta.content) {
                                                    // 切换到正文输出阶段
                                                    if (isReasoningPhase) {
                                                        isReasoningPhase = false;
                                                        // 发送一个阶段切换的信号
                                                        yield {
                                                            type: 'phase_change',
                                                            reasoningContent: reasoningContent
                                                        };
                                                    }
                                                    // 处理正文内容
                                                    messageContent += choice.delta.content;
                                                    yield {
                                                        type: 'content',
                                                        content: choice.delta.content
                                                    };
                                                }
                                            } else {
                                                // 处理其他模型的普通响应
                                                if (choice.delta && choice.delta.content) {
                                                    messageContent += choice.delta.content;
                                                    yield {
                                                        type: 'content',
                                                        content: choice.delta.content
                                                    };
                                                }
                                            }
                                        }
                                    } catch (e) {
                                        console.error('解析流数据出错:', e);
                                    }
                                }
                            }
                        }
                        
                        // 流结束时，返回完整的内容
                        yield {
                            type: 'complete',
                            reasoningContent,
                            messageContent
                        };
                    }
                };
            } catch (error) {
                console.error("API请求错误:", error);
                throw error;
            }
        }

        // 发送消息
        async function sendMessage() {
            const input = document.getElementById('message-input');
            const userMessage = input.value.trim();
            
            if (userMessage && !isTyping) {
                // 找到当前聊天
                const currentChat = chats.find(c => c.id === currentChatId);
                
                if (currentChat) {
                    // 添加用户消息
                    const now = new Date();
                    currentChat.messages.push({
                        id: Date.now().toString(),
                        role: 'user',
                        content: userMessage,
                        timestamp: now.toISOString()
                    });
                    
                    // 显示用户消息
                    const messagesContainer = document.getElementById('chat-messages');
                    const userMessageElement = document.createElement('div');
                    userMessageElement.className = 'message user-message';
                    
                    const timeStr = now.getHours().toString().padStart(2, '0') + ':' + 
                                  now.getMinutes().toString().padStart(2, '0');
                    
                    userMessageElement.innerHTML = `
                        <p>${userMessage}</p>
                        <div class="message-time">${timeStr}</div>
                    `;
                    
                    // 用户消息容器包装
                    const userMessageWrapper = document.createElement('div');
                    userMessageWrapper.className = 'chat-message-wrapper justify-end';
                    userMessageWrapper.appendChild(userMessageElement);
                    messagesContainer.appendChild(userMessageWrapper);
                    
                    // 清空输入框
                    input.value = '';
                    
                    // 滚动到底部
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    
                    // 显示"正在输入"指示器
                    isTyping = true;
                    const aiThinking = document.createElement('div');
                    aiThinking.className = 'chat-message-wrapper';
                    
                    const aiAvatar = document.createElement('div');
                    aiAvatar.className = 'ai-avatar';
                    aiAvatar.innerHTML = `<img src="1.jpg" alt="小兔" />`;
                    aiThinking.appendChild(aiAvatar);
                    
                    const thinkingIndicator = document.createElement('div');
                    thinkingIndicator.className = 'ai-thinking';
                    thinkingIndicator.innerHTML = `
                        思考中
                        <div class="thinking-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    `;
                    aiThinking.appendChild(thinkingIndicator);
                    
                    messagesContainer.appendChild(aiThinking);
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    
                    // 获取当前选择的模型
                    const modelSelect = document.getElementById('model-select');
                    const model = modelSelect.value;
                    const modelName = modelSelect.options[modelSelect.selectedIndex].text;
                    
                    try {
                        // 记录思考开始时间
                        const thinkingStartTime = new Date();
                        let reasoningContent = '';
                        let messageContent = '';
                        let reasoningContainer = null;
                        let messageText = null;
                        let aiMessageElement = null;
                        
                        // 创建AI回复消息容器
                        const aiMessageWrapper = document.createElement('div');
                        aiMessageWrapper.className = 'chat-message-wrapper';
                        
                        const aiAvatar = document.createElement('div');
                        aiAvatar.className = 'ai-avatar';
                        aiAvatar.innerHTML = `<img src="1.jpg" alt="小兔" />`;
                        aiMessageWrapper.appendChild(aiAvatar);
                        
                        const messageContentDiv = document.createElement('div');
                        messageContentDiv.className = 'message-content';
                        
                        // 如果是DeepSeek-R1模型，预先创建思考内容容器
                        if (model === 'DeepSeek-R1') {
                            reasoningContainer = document.createElement('div');
                            reasoningContainer.className = 'reasoning-container';
                            
                            const reasoningHeader = document.createElement('div');
                            reasoningHeader.className = 'reasoning-header';
                            reasoningHeader.innerHTML = `
                                <div class="reasoning-title">
                                    <i class="fas fa-brain"></i>
                                    <span>思考过程</span>
                                    <div class="thinking-timer">
                                        <i class="fas fa-clock"></i>
                                        <span>思考中...</span>
                                    </div>
                                </div>
                                <div class="reasoning-arrow">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            `;
                            
                            const reasoningContentDiv = document.createElement('div');
                            reasoningContentDiv.className = 'reasoning-content';
                            
                            reasoningContainer.appendChild(reasoningHeader);
                            reasoningContainer.appendChild(reasoningContentDiv);
                            messageContentDiv.appendChild(reasoningContainer);
                            
                            // 添加点击事件以展开/折叠思考内容
                            reasoningHeader.addEventListener('click', function() {
                                reasoningContainer.classList.toggle('collapsed');
                            });
                        }
                        
                        // 创建消息元素
                        aiMessageElement = document.createElement('div');
                        aiMessageElement.className = 'message ai-message';
                        messageText = document.createElement('p');
                        aiMessageElement.appendChild(messageText);
                        
                        const timeElement = document.createElement('div');
                        timeElement.className = 'message-time';
                        timeElement.textContent = new Date().toLocaleTimeString('zh-CN', { 
                            hour: '2-digit', 
                            minute: '2-digit' 
                        });
                        aiMessageElement.appendChild(timeElement);
                        
                        messageContentDiv.appendChild(aiMessageElement);
                        aiMessageWrapper.appendChild(messageContentDiv);
                        
                        // 移除"正在输入"指示器并添加新的消息容器
                        messagesContainer.removeChild(aiThinking);
                        messagesContainer.appendChild(aiMessageWrapper);
                        
                        // 处理API响应
                        if (model === 'spn3/DeepSeek-chat' || model === 'DeepSeek-R1') {
                            const stream = await callSophNetAPI(userMessage, model);
                            
                            let isFirstReasoningChunk = true;
                            let isFirstContentChunk = true;
                            
                            // 如果是DeepSeek-R1模型，添加小兔思考动画（使用图片）
                            if (model === 'DeepSeek-R1') {
                                // 创建小兔思考动画（使用图片）
                                const rabbitThinking = document.createElement('div');
                                rabbitThinking.className = 'rabbit-thinking';
                                rabbitThinking.innerHTML = `
                                    <img src="./sikaoraib.png" alt="小兔思考中" class="rabbit-image">
                                    <div class="rabbit-text">
                                        小兔思考ing
                                        <div class="rabbit-thinking-dots">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                    </div>
                                `;
                                // 添加到正文区域
                                messageText.appendChild(rabbitThinking);
                            }
                            
                            for await (const chunk of stream) {
                                switch (chunk.type) {
                                    case 'reasoning':
                                        if (reasoningContainer) {
                                            const reasoningContentElement = reasoningContainer.querySelector('.reasoning-content');
                                            reasoningContent += chunk.content;
                                            // 使用streamReasoningText函数，只追加新内容
                                            await streamReasoningText(reasoningContentElement, chunk.content, isFirstReasoningChunk);
                                            isFirstReasoningChunk = false;
                                        }
                                        break;
                                        
                                    case 'phase_change':
                                        if (reasoningContainer) {
                                            // 计算思考时间
                                            const thinkingEndTime = new Date();
                                            const thinkingTime = Math.round((thinkingEndTime - thinkingStartTime) / 1000);
                                            
                                            // 更新思考时间显示
                                            const timerElement = reasoningContainer.querySelector('.thinking-timer span');
                                            timerElement.textContent = `${thinkingTime}秒`;
                                            
                                            // 折叠思考内容
                                            reasoningContainer.classList.add('collapsed');
                                        }
                                        
                                        // 移除小兔思考动画
                                        const rabbitThinking = messageText.querySelector('.rabbit-thinking');
                                        if (rabbitThinking) {
                                            // 添加淡出动画并移除
                                            rabbitThinking.style.transition = 'all 0.5s ease';
                                            rabbitThinking.style.opacity = '0';
                                            rabbitThinking.style.transform = 'translateY(-10px)';
                                            setTimeout(() => {
                                                rabbitThinking.remove();
                                            }, 500);
                                        }
                                        break;
                                        
                                    case 'content':
                                        messageContent += chunk.content;
                                        // 使用新的streamContentText函数，只追加新内容
                                        await streamContentText(messageText, chunk.content, isFirstContentChunk);
                                        isFirstContentChunk = false;
                                        break;
                                        
                                    case 'complete':
                                        // 保存完整消息到历史记录
                                        currentChat.messages.push({
                                            id: Date.now().toString(),
                                            role: 'assistant',
                                            content: chunk.messageContent,
                                            reasoning: chunk.reasoningContent,
                                            reasoningTime: Math.round((new Date() - thinkingStartTime) / 1000),
                                            timestamp: new Date().toISOString()
                                        });
                                        
                                        // 确保移除小兔思考动画（如果还存在）
                                        const remainingRabbit = messageText.querySelector('.rabbit-thinking');
                                        if (remainingRabbit) {
                                            remainingRabbit.remove();
                                        }
                                        
                                        // 移除闪烁光标效果
                                        const contentStreamElement = document.getElementById(messageText.dataset.streamId);
                                        if (contentStreamElement) {
                                            // 创建无动画的替代元素
                                            const finalText = document.createElement('div');
                                            finalText.style.whiteSpace = 'pre-wrap';
                                            finalText.textContent = messageContent;
                                            // 替换带有闪烁效果的元素
                                            messageText.innerHTML = '';
                                            messageText.appendChild(finalText);
                                        }
                                        break;
                                }
                                
                                // 滚动到底部
                                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                            }
                        } else {
                            // 修改其他模型的模拟响应
                            await new Promise(resolve => setTimeout(resolve, 1500));
                            const response = `使用模型：${modelName}\n\n你好，感谢你的消息："${userMessage}"。我是一个模拟的AI助手，在实际应用中，这里会返回真实的AI回复。`;
                            
                            // 使用新的streamContentText函数
                            await streamContentText(messageText, response, true);
                            
                            // 保存消息到历史记录
                            currentChat.messages.push({
                                id: Date.now().toString(),
                                role: 'assistant',
                                content: response,
                                timestamp: new Date().toISOString()
                            });
                        }
                        
                        // 随机添加表情反应
                        if (Math.random() > 0.5) {
                            addReaction(aiMessageElement);
                        }
                        
                    } catch (error) {
                        console.error('发送消息出错:', error);
                        
                        // 移除"正在输入"指示器
                        messagesContainer.removeChild(aiThinking);
                        
                        // 显示错误消息
                        const errorWrapper = document.createElement('div');
                        errorWrapper.className = 'chat-message-wrapper';
                        
                        const aiAvatar = document.createElement('div');
                        aiAvatar.className = 'ai-avatar';
                        aiAvatar.innerHTML = `<img src="1.jpg" alt="小兔" />`;
                        errorWrapper.appendChild(aiAvatar);
                        
                        const messageContent = document.createElement('div');
                        messageContent.className = 'message-content';
                        
                        const errorMessageElement = document.createElement('div');
                        errorMessageElement.className = 'message ai-message';
                        errorMessageElement.innerHTML = `
                            <p>抱歉，我在处理您的请求时遇到了问题。</p>
                            <div class="api-error">错误信息: ${error.message}</div>
                            <div class="message-time">刚刚</div>
                        `;
                        
                        messageContent.appendChild(errorMessageElement);
                        errorWrapper.appendChild(messageContent);
                        messagesContainer.appendChild(errorWrapper);
                    }
                    
                    // 滚动到底部
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    
                    // 如果是第一条消息，更新聊天标题
                    if (currentChat.messages.length === 3) { // 包括欢迎消息
                        currentChat.title = userMessage.substring(0, 20) + (userMessage.length > 20 ? '...' : '');
                        document.querySelector('h1').textContent = currentChat.title;
                    }
                    
                    // 保存聊天
                    saveChats();
                    
                    // 更新历史列表
                    renderChatHistory();
                    
                    // 重置标志
                    isTyping = false;
                }
            }
        }

        // 删除聊天
        function deleteChat(chatId) {
            if (confirm('确定要删除这个聊天吗？')) {
                chats = chats.filter(chat => chat.id !== chatId);
                saveChats();
                
                // 如果删除的是当前聊天，加载另一个聊天或创建新聊天
                if (chatId === currentChatId) {
                    if (chats.length > 0) {
                        loadChat(chats[0].id);
                    } else {
                        createNewChat();
                    }
                } else {
                    renderChatHistory();
                }
            }
        }

        // 保存聊天到本地存储
        function saveChats() {
            localStorage.setItem('ai-chats', JSON.stringify(chats));
        }

        // 切换表情选择器显示/隐藏
        function toggleEmojiPicker(event) {
            if (event) {
                event.stopPropagation(); // 阻止事件冒泡
            }
            const emojiPicker = document.getElementById('emoji-picker');
            
            // 直接操作display属性，确保显示正确
            if (emojiPicker) {
                if (emojiPicker.classList.contains('show')) {
                    emojiPicker.classList.remove('show');
                    emojiPicker.style.display = 'none';
                } else {
                    emojiPicker.classList.add('show');
                    emojiPicker.style.display = 'flex';
                    
                    // 默认显示第一个表情分类
                    document.querySelectorAll('.emoji-group').forEach((group, index) => {
                        group.style.display = index === 0 ? 'flex' : 'none';
                    });
                }
            }
        }
        
        // 插入表情到输入框
        function insertEmoji(emoji) {
            const input = document.getElementById('message-input');
            const cursorPos = input.selectionStart;
            const textBefore = input.value.substring(0, cursorPos);
            const textAfter = input.value.substring(cursorPos);
            
            input.value = textBefore + emoji + textAfter;
            
            // 设置光标位置
            const newCursorPos = cursorPos + emoji.length;
            input.setSelectionRange(newCursorPos, newCursorPos);
            
            // 聚焦回输入框
            input.focus();
            
            // 添加一个可见的插入效果
            const emojiPreview = document.createElement('div');
            emojiPreview.textContent = emoji;
            emojiPreview.style.position = 'absolute';
            emojiPreview.style.fontSize = '24px';
            emojiPreview.style.left = `${cursorPos * 8 + 40}px`; // 简单估算位置
            emojiPreview.style.top = '50%';
            emojiPreview.style.transform = 'translateY(-50%) scale(1.5)';
            emojiPreview.style.opacity = '1';
            emojiPreview.style.transition = 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
            emojiPreview.style.zIndex = '20';
            emojiPreview.style.pointerEvents = 'none';
            
            document.querySelector('.chat-input-container').appendChild(emojiPreview);
            
            setTimeout(() => {
                emojiPreview.style.opacity = '0';
                emojiPreview.style.transform = 'translateY(-100%) scale(0.5)';
                setTimeout(() => {
                    emojiPreview.remove();
                }, 300);
            }, 10);
            
            // 关闭表情选择器
            document.getElementById('emoji-picker').classList.remove('show');
        }
        
        // 添加随机反应表情到消息
        function addReaction(messageElement) {
            const reaction = document.createElement('div');
            reaction.className = 'emoji-reaction';
            const randomEmoji = reactionEmojis[Math.floor(Math.random() * reactionEmojis.length)];
            reaction.textContent = randomEmoji;
            messageElement.appendChild(reaction);
            
            // 给予反应表情一个特效
            setTimeout(() => {
                reaction.style.transform = 'scale(1)';
                reaction.addEventListener('click', () => {
                    reaction.style.transform = 'scale(1.3)';
                    setTimeout(() => {
                        reaction.style.transform = 'scale(1)';
                    }, 300);
                });
            }, 500);
        }

        // 检查是否使用DeepSeek-R1模型并更新UI
        function checkDeepSeekR1Model() {
            const modelSelect = document.getElementById('model-select');
            const messageInput = document.getElementById('message-input');
            const emojiButton = document.getElementById('emoji-button'); // 将变量定义移到 if/else 外部
            
            if (modelSelect.value === 'DeepSeek-R1') {
                messageInput.placeholder = "使用DeepSeek-R1 (支持让小兔帮你思考emmmm)...";
                
                // 添加小型提示图标
                const deepseekIcon = document.createElement('div');
                deepseekIcon.className = 'deepseek-icon';
                deepseekIcon.innerHTML = '<i class="fas fa-brain" style="color: var(--highlight); font-size: 12px; position: absolute; top: -5px; right: -5px;"></i>';
                emojiButton.appendChild(deepseekIcon);
                
                // 添加工具提示
                emojiButton.setAttribute('title', '小兔牌思考(超厉害!)已启用');
            } else {
                messageInput.placeholder = "输入消息...";
                
                // 移除提示图标
                const deepseekIcon = document.querySelector('.deepseek-icon');
                if (deepseekIcon) {
                    deepseekIcon.remove();
                }
                
                emojiButton.removeAttribute('title');
            }
        }

        // 通用流式输出函数 - 用于短文本或非流式场景
        async function streamText(element, text) {
            // 如果文本很短，直接显示
            if (text.length < 50) {
                element.textContent = text;
                return;
            }
            
            // 清空元素内容
            element.innerHTML = '';
            const streamDiv = document.createElement('div');
            streamDiv.className = 'stream-text';
            element.appendChild(streamDiv);
            
            // 模拟打字效果，动态调整速度
            let i = 0;
            let speed = Math.max(10, Math.min(30, text.length / 100)); // 根据文本长度动态调整速度
            const charsPerBatch = Math.max(1, Math.floor(text.length / 200)); // 根据文本长度动态调整每批字符数
            
            while (i < text.length) {
                // 每次添加一小批字符，以提高性能
                const endIndex = Math.min(i + charsPerBatch, text.length);
                const chunk = text.substring(i, endIndex);
                streamDiv.textContent += chunk;
                
                // 滚动到底部
                const messagesContainer = document.getElementById('chat-messages');
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                // 动态延迟，根据内容类型和标点符号调整
                let delay = Math.random() * speed + 5;
                
                // 如果遇到句号、问号或感叹号，增加延迟
                if (chunk.includes('.') || chunk.includes('?') || chunk.includes('!') || 
                    chunk.includes('。') || chunk.includes('？') || chunk.includes('！')) {
                    delay += 50;
                }
                
                // 如果遇到换行符，增加延迟
                if (chunk.includes('\n')) {
                    delay += 75;
                }
                
                await new Promise(resolve => setTimeout(resolve, delay));
                i = endIndex;
            }
            
            // 完成后，保持原始文本格式
            const finalText = document.createElement('div');
            finalText.style.whiteSpace = 'pre-wrap';
            finalText.textContent = text;
            element.innerHTML = '';
            element.appendChild(finalText);
        }
    </script>
</body>
</html> 